<template>
  <div class="" style="background-color: #f2f4f7;width: 100%;height: 100%">
    <div class="head">
      <span style="padding-bottom: 8px">批改答卷</span>
    </div>

    <!--批卷信息详情-->
    <div v-if="dataFlag" class="main">
      <!--试题信息头      -->
      <div class="main-head">
        <div style="margin-left:20px;display: flex;align-items: center;width: 100%;height: 55px">
          <span class="questionType">{{ answerPaperListData[0].paper.paperTitle }}</span>
        </div>
        <div style="margin-left:20px;">
          <span class="questionInfo">已批：13 / 50</span>
        </div>
      </div>

      <!--题目列表-->
      <div  style=""
           class="questionBlock">

        <!--填空题题目列表-->
        <div v-for="(question, index) of answerPaperListData[0].paper.paperQuestionList" class="fillInList" v-if="question.questionType==3">
          <!--题目信息-->
          <div>
            <!--问题标题-->
            <div style="margin-top: 20px;margin-left: 30px;width: 100%;display: flex;align-items: center;height: 56px">
              <span class="questionTitle">{{ index + 1 }}.{{ question.questionTitle }}</span>
            </div>

            <!--问题回答-->
            <div style="margin-left: 15px;width: 100%;">
              <!--答案输入框-->
              <div style="display: flex;flex-direction: column;  font-size: 18px;margin-bottom: 90px;">
                <div v-for="(answer, index) of question.paperQuestionAnswerList" :label="index + 1">
                  <div class="inputDeep"
                       style="display: flex;align-items: start;margin-top: 15px;margin-left: 20px;width: 300px;">
                    <span style="margin-top: 20px">{{ index + 1 }}.</span>
                    <el-input class="input_bottom" style="width: 200px;" v-model="question.selected[index]"/>
                  </div>
                </div>
              </div>

            </div>
          </div>

          <!--参考答案-->
          <div style="margin-left: 30px;position: relative;bottom: -50px;height: 150px">
            <span class="suggestedAnswerTitle">-参考答案：</span>
            <div style="display: flex;margin-top: 10px;">
              <div v-for="(answer,index) of question.paperQuestionAnswerList">
                <span class="suggestedAnswer">({{ index + 1 }}).{{ answer.answerText }}</span>
              </div>
            </div>
          </div>

          <!--评分-->
          <div style="margin-left:30px;display: flex;margin-top: 60px">
            <span class="score">-评分：</span>
            <div class="slider">
<!--              <el-button plain @click="test(question,0)">0</el-button>-->
              <!--                <el-button plain @click="correctFillInScore(question,5)"  >5</el-button>-->
              <el-radio-group v-model="question.score">
                <el-radio-button :label="0">0</el-radio-button>
                <el-radio-button :label="5">5</el-radio-button>
              </el-radio-group>
            </div>
          </div>

        </div>


        <!--简答题题目列表-->
        <div v-for="(question, index) of answerPaperListData[0].paper.paperQuestionList" class="fillInList" v-if="question.questionType==4">
          <!--题目信息-->
          <div>
            <!--问题标题-->
            <div style="margin-top: 20px;margin-left: 30px;width: 100%;display: flex;align-items: center;height: 56px">
              <span class="questionTitle">{{ index + 1 }}.{{ question.questionTitle }}</span>
            </div>

            <!--问题回答-->
            <div style="margin-left: 15px;width: 100%;">
              <!--答案输入框-->
              <div
                  style="display: flex;flex-direction: column;  font-size: 18px;margin-bottom: 90px;margin-left: 30px;">
                <div style="width: 500px!important;">
                  <el-input type="textarea" :rows="9" v-model="question.selected"></el-input>
                </div>
              </div>

            </div>
          </div>

          <!--参考答案-->
          <div style="margin-left: 30px;position: relative;bottom: -50px;height: 150px">
            <span class="suggestedAnswerTitle">-参考答案：</span>
            <div style="display: flex;margin-top: 10px;text-align: start">
              <span class="suggestedAnswer">{{ question.paperQuestionAnswerList[0].answerText }}</span>
            </div>
          </div>

          <!--评分-->
          <div style="margin-left:30px;display: flex;margin-top: 60px">
            <span class="score">-评分：</span>
            <div class="slider">
              <el-radio-group v-model="question.score">
                <el-radio-button :label="0">0</el-radio-button>
                <el-radio-button :label="1">1</el-radio-button>
                <el-radio-button :label="2">2</el-radio-button>
                <el-radio-button :label="3">3</el-radio-button>
                <el-radio-button :label="4">4</el-radio-button>
                <el-radio-button :label="5">5</el-radio-button>
                <el-radio-button :label="6">6</el-radio-button>
                <el-radio-button :label="7">7</el-radio-button>
                <el-radio-button :label="8">8</el-radio-button>
                <el-radio-button :label="9">9</el-radio-button>
                <el-radio-button :label="10">10</el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </div>


      </div>

      <div v-if="currentPage==answerPaperListTemp.length" class="main-footer">
        <el-button type="primary" style="margin-right: 40px;margin-bottom: 20px" @click="commitCorrectAnswerPaper">提交</el-button>
      </div>

    </div>

    <!--批卷导航菜单-->
    <div v-if="dataFlag" class="guideMenu">
      <!--导航头-->
      <div class="guideMenu-head">
        <div style="margin-top: 15px;margin-left: 15px;width: 100%">
          <!--试卷名-->
          <div>
            <span class="paperTitle">

              {{ answerPaperListData[0].student.year }}级
              {{ answerPaperListData[0].student.majorName }}
              {{ answerPaperListData[0].student.classNum }}班
            </span>
          </div>
          <div style="margin-top: 10px;width: 100%;display: flex; flex-direction: row;">
            <span class="paperInfo-name">学生：{{ answerPaperListData[0].student.userName }}</span>
            <span class="paperInfo-time">提交时间：{{ answerPaperListData[0].submitTime }}</span>
          </div>
        </div>
      </div>
      <div style="height: 600px">
        <!--主体-->
        <div style="height: 560px">

          <!--填空题-->
          <div>
            <!--填空题标题-->
            <div style="margin-top:10px;margin-left:15px;width: 100%; height: 30px; display: flex;align-items: center;">
              <span style="font-size:15px;font-family: 微软雅黑">一、填空题</span>
            </div>
            <!--填空题定位按钮-->
            <div style="margin-left:10px;width: 100%;display:flex;align-items: start;flex-wrap: wrap">
              <div v-for="(question, index) of answerPaperListData[0].paper.paperQuestionList">
                <el-button style=" width: 50px;margin-top: 10px;margin-left: 10px"
                           plain size="mini" type="primary" v-if="question.questionType==3"
                           @click="scrollToFillInList(index)">
                  {{ index + 1 }}
                </el-button>
              </div>
            </div>
          </div>

          <!--简答题-->
          <div>
            <!--简答题标题-->
            <div style="margin-top:10px;margin-left:15px;width: 100%; height: 30px; display: flex;align-items: center;">
              <span style="font-size:15px;font-family: 微软雅黑">二、简答题</span>
            </div>
            <!--简答题定位按钮-->
            <div style="margin-left:10px;width: 100%;display:flex;align-items: start;flex-wrap: wrap">
              <div v-for="(question, index) of answerPaperListData[0].paper.paperQuestionList">
                <el-button style=" width: 50px;margin-top: 10px;margin-left: 10px"
                           plain size="mini" type="primary" v-if="question.questionType==4"
                           @click="scrollToFillInList(index)">
                  {{ index + 1 }}
                </el-button>
              </div>
            </div>
          </div>

        </div>
        <!--分页按钮-->
        <div style="height: 40px;width: 329px;display: flex;justify-content: center">
          <el-pagination
              background
              :page-size="1"
              @current-change="handleCurrentChange"
              :pager-count="5"
              layout="pager"
              :total="answerPaperListTemp.length">
          </el-pagination>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import Session_Storage from "@/utils/sessionStorage";
import {commitCorrectAnswerPaperListApi, getAnswerPaperInfoListApi} from "@/api/CorrectAnswerPaper";
import notification from "@/utils/notification";

export default {
  props: {
    exam: []
  },
  data() {
    return {
      loadingFlag: true,
      dataFlag: false,
      examTemp: {},
      //存储后端传回的数据
      answerPaperListTemp: {},
      //分页处理后的数据
      answerPaperListData: {},
      //分页数据
      currentPage: 1, // 当前页
      pageSize: 1, //    每页的数据
      pagerCount: 4,
    }
  },
  name: "CorrectAnswerPaperView",
  methods: {
    async commitCorrectAnswerPaper() {

      const answerPaperList = this.answerPaperListTemp

      //在前往后端保存时 将selected的字符串数组进行空处理 避免后端接收映射错误
      answerPaperList.forEach(answerPaperList => {
        answerPaperList.paper.paperQuestionList = answerPaperList.paper.paperQuestionList.map(item => {
          if (item?.questionType === "3") {
            return {
              ...item,
              selected: ""
            };
          }
          //
          return item;
        });
      });
      let confirm = await this.$myConfirm("确认提交批改的试卷？")
      console.info("提交改卷", answerPaperList)
      if (confirm){
        await commitCorrectAnswerPaperListApi(answerPaperList).then(res=>{
          if (res.data.code==200){
            notification.ntfCommonSuccess("提示", res.data.msg)
          }
        })
      }

    },
    test(row, score) {
      console.info("注入score answerPaperListTemp", this.answerPaperListTemp)
    },
    scrollToFillInList(index) {
      const questionElem = this.$el.querySelectorAll('.fillInList')[index]
      questionElem.scrollIntoView({behavior: 'smooth'}) // 平滑滚动到对应fillInList题目位置
    },

    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
      this.answerPaperFilter()
      console.info("this.answerPaperListData[0].", this.answerPaperListData[0].student.userName)
    },
    answerPaperFilter() {
      // 前端进行的自定义分页
      this.answerPaperListData = this.answerPaperListTemp.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
      console.info("answerPaperListData", this.answerPaperListData)
    },
    //缓存跳转到当前页面的参数
    sessionCache() {
      //从session获取数据
      const infoFromStorage = Session_Storage.getItem('examTemp');
      // console.info("$route",this.$route)

      if (infoFromStorage) {
        //如果有数据 将其保存在temp中
        this.examTemp = infoFromStorage;
      } else {
        //如果没有就是第一次进入页面 保存数据在session中 并设置temp为当前数据
        this.examTemp = this.exam;
        Session_Storage.setItem("examTemp", this.exam)
      }
    },
    getAnswerPaperInfoList() {
      getAnswerPaperInfoListApi(this.examTemp).then(res => {
        if (res.data.code == 200) {
          this.answerPaperListTemp = res.data.data;
          // console.info("处理前this.answerPaperListTemp", this.answerPaperListTemp)

          this.answerPaperListTemp.forEach(answerPaperList => {
            answerPaperList.paper.paperQuestionList.sort((a, b) => {
              if (a.questionType === "3" && b.questionType === "4") {
                return -1;
              } else if (a.questionType === "4" && b.questionType === "3") {
                return 1;
              }
              return 0;
            });

            answerPaperList.paper.paperQuestionList = answerPaperList.paper.paperQuestionList.map(item => {
              if (item.questionType === "3") {
                return {
                  ...item,
                  selected: item.selected.split(',')
                };
              }
              return item;
            });
          });

          console.info("处理后this.answerPaperListTemp", this.answerPaperListTemp)
          this.answerPaperFilter()
          //数据判空 避免报错
          this.dataFlag = true
        }
      })
    }
  },
  created() {
    this.sessionCache()
    this.getAnswerPaperInfoList()

  },
  //在离开当前页面时清除所有 examTemp
  beforeDestroy() {
    Session_Storage.clear();
  },
}
</script>

<style scoped>

.head {
  top: 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: 微软雅黑;
  color: #75757b;
  width: 100%;
  height: 50px;

}

.main {
  margin-top: 32px;
  margin-left: 592px;
  background-color: #ffffff;
  width: 992px;
  border-radius: 10px 10px 0px 0px;
  height: 100%;
}

.guideMenu {
  position: fixed;
  background-color: #ffffff;
  width: 329px;
  top: 90px;
  border-radius: 10px;
  left: 255px;
  z-index: 100;
  height: 700px;
}

.guideMenu-head {
  height: 90px;
  border-bottom: 1px solid #F2F2F2;
  display: flex;
}

.main-head {
  height: 90px;
  border-bottom: 1px solid #F2F2F2;
  border-radius: 10px 10px 0px 0px;
  width: 100%;
}

.paperTitle {
  font-size: 17px;
  color: #181E33;
  font-weight: bold;
  display: flex;

}

.paperInfo-name {
  color: #A8A8B3;
  font-size: 14px;
  width: 95px;
  display: flex;
}

.paperInfo-time {
  color: #A8A8B3;
  font-size: 14px;
  width: 213px;
  display: flex;
}

.questionType {
  font-size: 18px;
  color: #181E33;
  font-weight: bold;
  display: flex;
}

.questionInfo {
  font-size: 16px;
  color: #A8A8B3;
  display: flex;
}

.questionTitle {
  font-size: 19px;
  font-family: 宋体;
}

.text {
  display: flex;
  align-items: center;
  height: 40px;
  font-size: 18px;
  font-family: 宋体;
}

.suggestedAnswer {
  color: #67C23A;
  margin-right: 15px;
}

.suggestedAnswerTitle {
  display: flex;

}

.score {
  display: flex;
  align-items: center;
}

.slider {
  width: 65%;
  margin-left: 20px;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
}

.guideButton {
  display: flex;
  justify-content: end;
  position: relative;
  bottom: -145px;
  width: 950px;
  margin-bottom: 20px;
}

.questionBlock {
  border-top: 1px solid #F2F2F2;

}

.main-footer{
  height: 85px;
  border-top: 1px solid #F2F2F2;
  display: flex;
  justify-content: end;
  align-items: end;
}

</style>